<template>
	<div class="purchaseProcessingCenterView">
		<div class="cardview">
			<div class="cardview-body">
				<!-- <div class="cardview-body-click">
			    <el-row>
			      <el-col :span="6">
			        <el-button>增</el-button>
			      </el-col>
			      <el-col :span="6">
			        <el-button>删</el-button>
			      </el-col>
			      <el-col :span="6">
			        <el-button>改</el-button>
			      </el-col>
			      <el-col :span="6">
			        <el-button>查</el-button>
			      </el-col>
			    </el-row>
			  </div> -->

				<div class="cardview-body-table">
					<el-table
						:data="bannersList" size="small" border fit
			      highlight-current-row>
						<el-table-column
							prop="name"
							label="昵称"
						></el-table-column>
						<el-table-column
							prop="phone"
							label="手机号"
						></el-table-column>
						<el-table-column label="用户权限">
							<template slot-scope="scope">
								{{ scope.row.identity | reidentity}}
							</template>
						</el-table-column>
						<el-table-column label="创建时间">
							<template slot-scope="scope">
								{{ formateDate(scope.row.createTime) }}
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button
									type="text"
									@click="changeuserideity(scope.row)"
								>修改权限</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>

				<div class="cardview-body-changepage">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="pageQuery.page"
						:page-sizes="[10, 20, 30, 40]"
						:page-size="pageQuery.size"
						layout="total, sizes, prev, pager, next, jumper"
						:total="allCount"
					></el-pagination>
				</div>
			</div>
		</div>

		<el-dialog
			title="修改权限"
			:visible.sync="changedialogVisible"
			:before-close="handleClose"
			append-to-body
		>
			<div class="dialogtochange">
				<el-row>
					<el-col :span="12">选择要修改的权限：</el-col>
					<el-col :span="12">
						<el-select
							v-model="infodatastatus"
							placeholder="请选择"
						>
							<el-option
								v-for="item in options"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</el-col>
				</el-row>
			</div>
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button @click="changedialogVisible = false">取 消</el-button>
				<el-button
					type="primary"
					@click="toupdatausertoide"
				>确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>


<script>
	import { selectAllUser, updateUserIdentityById } from "../../../api/user";
	export default {
		data() {
			return {
				pageQuery: {
					status: "1",
					pageNum: 1,
					pageSize: 10,
					name: "",
					phone: "",
					nickName: "",
				},
				options: [
					{
						value: "1",
						label: "普通用户",
					},
					{
						value: "6",
						label: "后台用户",
					},
					{
						value: "8",
						label: "系统管理员",
					},
					{
						value: "9",
						label: "车主",
					},
				],
				infodatastatus: null, //用户修改权限是的选择的权限
				bannersList: null,
				allCount: null,
				changedialogVisible: false, //修改权限位置
				infodata: null, //选择的用户信息
			};
		},
		mounted() {
			this.getdata();
		},
		filters: {
			reidentity: function (e) {
				if (e == 1) {
					return "平台用户";
				}
				if (e == 6) {
					return "后台用户";
				}
				if (e == 8) {
					return "系统管理员";
				}
				if (e == 9) {
					return "车主";
				}
			},
		},
		methods: {
			getdata() {
				selectAllUser(this.pageQuery).then((res) => {
					if (res.code == 200) {
						this.bannersList = res.data.selectUserInfoCondition;
						this.allCount = res.data.allCount;
					}
				});
			},
			toupdatausertoide() {
				console.log("userinfo", this.infodata);
				console.log("userinfo", this.infodatastatus);
				if (!this.infodatastatus) {
					this.$message({
						message: "请选择修改的权限",
						type: "warning",
					});
				}
				let a = {
					id: this.infodata.id,
					identity: this.infodatastatus,
				};
				updateUserIdentityById(a)
					.then((res) => {
						if (res.code == 200) {
							this.$message({
								message: "修改成功",
								type: "success",
							});

							this.handleClose();
						}
					})
					.catch((err) => {});
			},
			formateDate(datetime) {
				// let  = "2019-11-06T16:00:00.000Z"
				function addDateZero(num) {
					return num < 10 ? "0" + num : num;
				}
				let d = new Date(datetime);
				let formatdatetime =
					d.getFullYear() +
					"-" +
					addDateZero(d.getMonth() + 1) +
					"-" +
					addDateZero(d.getDate()) +
					" " +
					addDateZero(d.getHours()) +
					":" +
					addDateZero(d.getMinutes()) +
					":" +
					addDateZero(d.getSeconds());
				return formatdatetime;
			},
			//点击修改权限按钮
			changeuserideity(e) {
				this.infodata = e;
				this.changedialogVisible = true;
			},
			//页面跳转
			handleSizeChange(val) {
				this.pageQuery.size = val;
				this.getdata();
			},
			//规格跳转
			handleCurrentChange(val) {
				this.pageQuery.page = val;
				this.getdata();
			},
			//修改权限后的逻辑
			handleClose() {
				this.infodata = null;
				this.infodatastatus = null;
				this.changedialogVisible = false;
				this.getdata();
			},
		},
	};
</script>


<style lang="less" scoped>
	.purchaseProcessingCenterView {
		// padding: 20px;
		// overflow: auto;
		// height: 83%;

		.headerText {
			font-size: 25px;
			font-weight: bold;
		}

		.cardview-body-table {
			padding: 20px 0 0 0;

			.cardview-body-table-title {
				font-size: 20px;
				font-weight: bold;
				padding-top: 20px;
				padding-bottom: 20px;
				border-top: 1px solid #eeeeee;
				border-bottom: 1px solid #eeeeee;
			}
		}

		.cardview-body-changepage {
			padding: 30px 20px 0 0;
			text-align: right;
		}
	}
</style>
